import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    StatusBar,
    Linking,
    ActivityIndicator,
    DeviceEventEmitter,
    TextInput,
} from 'react-native';

import AndroidModule from "../../utils/AndroidConnent";
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Header from "../../components/header";
import Constant from '../../utils/Constant'//全局变量
import { ToastToUser } from "../../utils/CustomToast";

const screenW = Dimensions.get('window').width;
const isIos = Platform.OS == 'ios';

let navigation;

export default class AccountLogOff extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isAgree: false
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    }

    componentDidMount() {

    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={'账号注销'} />
               

                <Image style={styles.warnIcon} source={require('source/image/comm/warn_icon.png')} />

                <Text style={styles.warnText}>在开始注销账号前，请您确认以下内容</Text>
                <View style={styles.statementBox}>
                    <Text style={styles.statementTitle}>账号无任何资产</Text>
                    <Text style={styles.statementDes}>{'账号资产包含但不限于企业信息、会员资格、车辆信息、维保充值、保证金、客户信息等。'}</Text>
                </View>
                <View style={[styles.statementBox, { marginTop: 30 }]}>
                    <Text style={styles.statementTitle}>账号不可找回</Text>
                    <Text style={styles.statementDes}>{'账号注销后账号关联的手机号、身份信息等都将会释放，且无法找回。'}</Text>
                </View>

                <View style={styles.agreeBg}>
                    <TouchableOpacity
                        style={styles.checkBox}
                        activeOpacity={0.8}
                        onPress={() => {
                            let isAgree = this.state.isAgree
                            this.setState({
                                isAgree: !isAgree
                            })
                        }}
                    >
                        {isIos ? <Image style={styles.checkIcon} source={{ uri: this.state.isAgree ? 'agent_check' : 'agent_uncheck' }} />

                            :

                            <Image style={styles.checkIcon} source={{ uri: this.state.isAgree ? 'icon_selector_checked_2' : 'icon_selector_unchecked_2' }}></Image>}

                        <Text style={styles.agreeText}>我已阅读并同意 </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={0.8}
                        onPress={() => {
                            this.clickUserAgreement()
                        }}
                    >
                        <Text style={styles.agreementText}>《用户协议》</Text>
                    </TouchableOpacity>
                    <Text style={styles.agreeText}> 与 </Text>
                    <TouchableOpacity
                        activeOpacity={0.8}
                        onPress={() => {
                            this.clickPrivilegeAgreement()
                        }}
                    >
                        <Text style={styles.agreementText}>《隐私政策》</Text>
                    </TouchableOpacity>
                </View>

                <TouchableOpacity
                    style={[styles.logoffBtn, { bottom: Constant.bottomHeight + 10, backgroundColor: this.state.isAgree ? '#ED542E' : '#F5F5F5' }]}
                    activeOpacity={0.8}
                    onPress={() => {
                        this.clickLogoOff()
                    }}
                >
                    <Text style={[styles.logoffText, { color: this.state.isAgree ? '#FFFFFF' : '#999999' }]}>注销账号</Text>
                </TouchableOpacity>


            </View>
        );
    }

    clickUserAgreement() {
        
        navigation.navigate('WebView', { source: 'https://m.shuaiche.com/static/protocol/yeguanService.html' })
    }

    clickPrivilegeAgreement() {
        
        navigation.navigate('WebView', { source: 'https://m.shuaiche.com/static/protocol/yeguanPrivacy.html',title:'隐私协议' })
    }

    clickLogoOff() {
        if (!this.state.isAgree) {
            ToastToUser('请先同意《用户协议》与《隐私政策》')
            return
        }
        navigation.navigate('AccountLogOffSubmit')
    }

}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
    },
    warnIcon: {
        marginTop: 33,
        width: 85,
        height: 85
    },
    warnText: {
        marginTop: 39,
        color: '#333333',
        fontSize: 18,
        fontWeight: '600'
    },
    statementBox: {
        marginTop: 50,
        width: '100%',
        paddingHorizontal: 30,
        flexDirection: 'column',
        alignItems: 'flex-start'
    },
    statementTitle: {
        color: '#333333',
        fontSize: 16,
        fontWeight: '500',
        lineHeight: 26,
    },
    statementDes: {
        color: '#999999',
        fontSize: 14,
        marginTop: 10,
        lineHeight: 20,
    },
    agreeBg: {
        position: 'absolute',
        bottom: 157,
        marginTop: 100,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    checkBox: {
        height: 30,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    checkIcon: {
        marginRight: 8,
        width: 18,
        height: 18,
    },
    agreeText: {
        color: '#333333',
        fontSize: 12
    },
    agreementText: {
        color: '#ED542E',
        fontSize: 12
    },
    logoffBtn: {
        position: 'absolute',
        width: '90%',
        height: 46,
        borderRadius: 23,
        justifyContent: 'center',
        alignItems: 'center'
    },
    logoffText: {
        fontSize: 15
    },
})